<body>
<input id="sendTxt" type="text" title="ss"/>
<button id="sendBtn" onclick="sendMessage()">Send</button>
<div id="recv"></div>

<!-- 新增的消息区域 -->
<div id="messageList" style="margin-top: 20px; border: 1px solid #ccc; padding: 10px; min-height: 100px;"></div>

<script type="text/javascript">
    var ws = new WebSocket("ws://localhost:8080/");
    ws.onopen = function (e) {
        console.log('Connection to server opened');
    };
    ws.onmessage = function (msg) {
        console.log(msg.data);
        // 追加消息到新的区域
        var messageList = document.getElementById("messageList");
        var messageItem = document.createElement("div");
        messageItem.textContent = msg.data;
        messageItem.style.marginBottom = "5px";
        messageList.appendChild(messageItem);
    };
    function sendMessage() {
        var txt = document.getElementById("sendTxt").value;
        ws.send(txt);
    }
</script>
</body>
